<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title中秋节快乐（刮一刮）z</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		
		.ggl {
			height: 150px;
			position: relative;
		}
		
		.prize {
			width: 100%;
			height: 150px;
			font-size: 30px;
			color: red;
			text-align: center;
			line-height: 150px;
			position: absolute;
			z-index: 1;
		}
		
		#canvas {
			position: absolute;
			z-index: 2;
		}
	</style>
</head>

<body>
	<div class="ggl">
		<div class="prize">谢谢惠顾</div>
		<canvas id="canvas"></canvas>
	</div>
	<script>
		canvas=document.getElementById("canvas");
        canvas.width=window.innerWidth;
        canvas.height=650;
        ctx=canvas.getContext("2d");
        ctx.fillStyle="orange";
        ctx.fillRect(0,0,window.innerWidth,150);
        canvas.addEventListener("touchstart",function(){
            canvas.addEventListener("touchmove",function(e){
                ctx.clearRect(e.touches[0].clientX,e.touches[0].clientY,30,30);
                e.preventDefault();
            });
        });
        arr=["谢谢惠顾","混合口味月饼一箱","千元零食大礼包","免费信阳十日游","我免费当你男友一个月","浪漫温馨鲜花一束"];
        i=Math.floor(Math.random()*arr.length);
        document.querySelector(".prize").innerHTML=arr[i];
	</script>
</body>

</html>